<template>
	<view class="active-box">
		<!-- 活动视频 -->
<!-- 		<view class="active-info-video">
			<video :src="activeInfo.bargain.show_cover ? activeInfo.bargain.video :''" object-fit="fill" controls show-mute-btn :poster="activeInfo.bargain.show_cover"></video>
		</view> -->
		
		<view class="active-info-video" v-if="activeInfo.bargain && activeInfo.bargain.banner">
			<swiper :indicator-dots="true" :interval="3000" :duration="1000" class="active-swiper">
				<swiper-item v-for="item in activeInfo.bargain.banner" class="active-swiper-item" @click="watchImg(item,activeInfo.bargain.banner)">
					<image :src="item" mode="aspectFill" class="swiper-image"></image>
				</swiper-item>
			</swiper>
		</view>
		
		<view class="info-detail-title">
			{{activeInfo.activity.title}}
		</view>
		
		<view class="active-info-detail">
			<!-- 活动信息 -->
			<view class="info-detail-box">
				<view class="info-detail-text">
					活动举办：<text>{{activeInfo.activity.company}}</text>
				</view>
				<view class="info-detail-text">
					活动内容：<text>{{activeInfo.activity.description}}</text>
				</view>
			</view>
			<!-- 活动倒计时 -->
			<view class="info-detail-time" v-if="progress.is_effect!==2">
				<block v-if="activeStatus==2 && activeInfo.activity.id">
					<view class="detail-time-title">距离开始时间</view>
					<text>{{showCountDown}}</text>
				</block>
				<block v-if="activeStatus==1 && activeInfo.activity.id">
					<view class="detail-time-title">距离结束时间</view>
					<text>{{showCountDown}}</text>
				</block>
				<block v-if="!activeStatus">
					<view class="detail-time-title">活动已结束</view>
				</block>
			</view>
			<view class="info-detail-time" v-else>
				<view class="detail-time-title">已参加过活动</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			activeInfo:{
				type:Object,
				default:{bragin:{video:''},activity:{}}
			},
			progress:{
				type:Object,
				default:{is_effect:1}
			}
		},
		computed:{
			activeStatus(){
				let {activity} = this.activeInfo
				let updateFlage = this.updateFlage
				console.log('更新标记2');
				if(!activity?.id){
					// 数据没获取到
					return 1
				}
				let endT = this.isPhone?activity.end_time.replace(/-/g,'/') :activity.end_time
				let startT = this.isPhone?activity.start_time.replace(/-/g,'/'):activity.start_time
				let end_time = new Date(endT).getTime()
				let start_time = new Date(startT).getTime()
				let nowTime = new Date().getTime()
				// 未开始
				if(start_time && nowTime < start_time){
					this.optnTime(start_time,nowTime)
					return 2
				}
				// 未结束
				if(end_time && nowTime < end_time){
					this.optnTime(nowTime,end_time)
					return 1
				}
				uni.hideShareMenu()
				return 0
			}
		},
		data(){
			return{
				 countDown: '00:00:00',
				 showCountDown:"00:00:00",
				 interval: null,
				 updateFlage:false
			}
		},
		  destroyed() {
		    // 页面销毁时清除定时器
		    this.clearCountDown();
		  },
		  watch:{
			  interval(newV,oldV){
				  if(oldV && !newV){
					  let title = '计时结束'
					  let tip = "活动时间已结束"
					  if(this.activeStatus == 2){
						  tip = "活动已开启"
						  }
					  this.$com.showTip(title,tip)
					  uni.showLoading({
					  	title:"更新中",
						mask:true
					  })
					  setTimeout(()=>{
						  uni.hideLoading()
						  this.updateFlage = !this.updateFlage
						  this.$emit('updateFlage')
					  },1000)
					  }
					  
				  }
		  },
		  destroyed() {
		  	this.clearCountDown()
		  },
		methods:{
			watchImg(current,urls){
				uni.previewImage({
					urls,
					current
				})
			},
			// 设置倒计时数据
			optnTime(start_time,end_time){
				let timeValue = this.$com.timeDifference(start_time,end_time)
				this.countDown = `${timeValue.h}:${timeValue.m}:${timeValue.s}`
				this.$nextTick(()=>this.startCountDown())
			},
			// 倒计时开始
			startCountDown() {
			      this.interval = setInterval(() => {
			        let [h, m, s] = this.countDown.split(':').map(Number);
			        s--;
			        if (s < 0) {
			          s = 59;
			          m--;
			        }
			        if (m < 0) {
			          m = 59;
			          h--;
			        }
			        h = h < 10 ? '0' + h : h;
			        m = m < 10 ? '0' + m : m;
			        s = s < 10 ? '0' + s : s;
			        this.countDown = `${h}:${m}:${s}`;
					this.showCountDown=Math.floor(h/24) ? `${Math.floor(h/24)}天 ${h%24}:${m}:${s}`:`${h}:${m}:${s}`
			        if (h === '00' && m === '00' && s === '00') {
			          this.clearCountDown();
			        }
			      }, 1000);
			},
			// 结束倒计时
			clearCountDown() {
			      if (this.interval) {
			        clearInterval(this.interval);
			        this.interval = null;
			      }
			}
		}
	}
</script>

<style>
	.active-box{font-size: 26rpx}
	.active-info-video {width: 100%;margin: 0 auto;}
	.active-info-video video{width: 100%;height: calc(100vw /16 * 9)}
	.active-swiper{width: 100vw;height: calc(100vw / 6 * 4);}
	.swiper-image{width: 100%;height: 100%;}
	
	/* 砍价信息 */
	.active-info-detail,.info-detail-title{width: 690rpx;margin: 10rpx auto;color: white;display: flex;}
	.info-detail-box{width: 70%;padding-right: 20rpx;box-sizing: border-box;}
	.info-detail-title{font-size: 32rpx;padding: 10rpx 0 20rpx;}
	.info-detail-text{padding-bottom: 10rpx;}
	
	.info-detail-time{width: 30%;background-color: rgba(0, 0, 0, .5);height: 100rpx;display: flex;flex-direction: column;justify-content: space-evenly;align-items: center;color: #fa7a79;}
</style>